<template>
	<view>
		<cu-custom bgColor="theme-bg-color" :isBack="true">
			<block slot="content">发起申请</block>
		</cu-custom>
		<form>
			<cu-date-picker title="请假时间" v-model="formData.BeginTime" @input="getCheckCourseList"></cu-date-picker>
			<view class="cu-form-group">
				<view class="title">课程选择</view>
				<picker @change="courseChange" :value="formData.CheckSettingId" :range="courseList" :range-key="courseDisplayKey">
					<view class="picker">
						{{formData.CheckSettingId ? getCourseDisplayText(courseList.find(item => item.Id === formData.CheckSettingId)) : '请选择课程'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">请假原因</view>
				<textarea maxlength="-1" v-model="formData.Reason" placeholder="请假原因"></textarea>
			</view>
			<cu-upload-image title="请假证明" limit="1" v-model="formData.ImageUrls"></cu-upload-image>

			<view class="padding margin-top">
				<button class="cu-btn block theme-bg-color margin-tb-sm lg" @click="Save()">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import DateTimesPicker from '@/components/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue'
	import store from "@/store";
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			DateTimesPicker
		},
		computed: {
			...mapGetters([
				'token', 'RoleTypeFormat', "userInfo", "userId"
			]),
			courseDisplayKey() {
				return 'courseDisplayText';
			}
		},
		data() {
			return {
				courseList: [],
				formData: {
					CheckSettingId: null,
					BeginTime: null,
					Reason: '',
					ImageUrls: null
				}
			}
		},
		methods: {
			SelectBeginTime() {
				this.$refs.BeginTimePicker.show();
			},
			BeginTimeSubmit(e) {
				this.formData.BeginTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
				this.$refs.BeginTimePicker.hide();
				this.$forceUpdate();
			},
			SelectEndTime() {
				this.$refs.EndTimePicker.show();
			},
			async Save() {
				let confirm = await this.$comm.ShowModal("你确定要提交请假吗?");

				if (confirm == false) {
					await this.$comm.ShowToast("用户放弃操作");
					return;
				}
				this.formData.UserId=this.userInfo.Id;
				this.formData.OrganizationId=this.userInfo.OrganizationId;
				this.formData.AuditStatus=0;
				if(!this.formData.Reason)
				{
					await this.$comm.ShowToast("请输入补卡原因");
					return;
				}

				console.log("-----upload-----", this.formData);
				
				let {
					Data,
					Success,
				} = await this.$http.PostAsync("/LeaveRecord/CreateOrEdit", this.formData);
				if (Success) {
					await this.$comm.ShowToast("提交成功");
					await this.$comm.ReturnPage();
				}
			},
			async getCheckCourseList() {
				if (!this.formData.BeginTime) return;
				let {
					Data,
					Success,
				} = await this.$http.PostAsync("/CheckSetting/GetCheckCourseList", {
					BeginDate: this.formData.BeginTime,
					OrganizationId: this.userInfo.OrganizationId
				});
				if (Success) {
					this.courseList = Data.map(course => ({
						...course,
						courseDisplayText: this.getCourseDisplayText(course)
					}));
					this.formData.CourseId = null;
				}
			},
			courseChange(e) {
				const index = e.detail.value;
				this.formData.CheckSettingId = this.courseList[index].Id;
			},
			getCourseDisplayText(course) {
				if (!course) return '';
				return `${course.CourseName}(${course.AmBeginHMS} - ${course.AmEndHMS})`;
			}
		}
	}
</script>

<style>

</style>